优化网站图片和提升加载速度可以显著提高用户体验和 SEO 排名。以下是关键的方法：

一、图片优化技巧

1. 使用合适的图片格式

不同格式适用于不同的场景：

• JPEG（JPG）：适用于照片，压缩率高，支持渐进式加载。

• PNG：适用于透明背景的图像，但文件较大。

• WebP：Google 推出的格式，比 JPEG 和 PNG 体积小 25%-35%，支持透明度和动画。

• AVIF：比 WebP 更小，但兼容性较低，适合现代浏览器。

• SVG：适用于矢量图（图标、Logo），缩放不失真，体积小。

👉 推荐：优先使用 WebP，并提供 JPEG/PNG 作为回退格式。

2. 压缩图片

自动化压缩工具

• 在线工具：

• TinyPNG

• Squoosh

• Compressor.io

• 命令行工具：

• Imagemin（Node.js）：

  npx imagemin input.jpg --out-dir=output --plugin=jpegtran
  

• OptiPNG（PNG 优化）：

  optipng -o7 input.png
  

3. 响应式图片（不同设备加载不同尺寸）

使用 srcset 指定不同尺寸的图片：

<img src="default.jpg"
     srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1920w"
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1920px"
     alt="优化图片示例">

• 浏览器会自动选择最合适的图片，减少加载时间。

4. 采用懒加载（Lazy Load）

避免一次性加载所有图片，提升首屏加载速度：

方法 1：原生 Lazy Load

<img src="image.jpg" loading="lazy" alt="懒加载示例">

• 支持 Chrome, Edge, Firefox，但不支持 Safari（需 JS 兼容）。

方法 2：使用 JavaScript

<script>
document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll("img[data-src]");
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let img = entry.target;
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });

    lazyImages.forEach(img => observer.observe(img));
});
</script>

• 只加载用户视图内的图片，减少请求量。

5. 使用 CDN 加速图片加载

推荐的图片 CDN：

• Cloudflare Images

• Imgix

• Akamai

• Fastly

• Alibaba Cloud OSS

👉 使用 CDN 的好处：

• 分布式存储，加快全球访问速度

• 自动优化格式，根据用户设备提供最佳格式（如 WebP）

• 减少服务器压力

二、提升加载速度的方法

1. 启用浏览器缓存

在 .htaccess 或 Nginx 配置中添加缓存策略：

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
</IfModule>

• 避免用户每次访问都重新加载图片。

2. 使用 CSS Sprites 合并小图片

• 合并多个小图标（如社交媒体图标），减少 HTTP 请求：

.icon {
    background: url('sprite.png') no-repeat;
    width: 50px;
    height: 50px;
}
.icon-facebook { background-position: 0 0; }
.icon-twitter { background-position: -50px 0; }

3. 预加载关键图片

• 提高首屏渲染速度：

<link rel="preload" as="image" href="hero-banner.jpg">

4. Gzip 或 Brotli 压缩

• 开启服务器端压缩（Nginx 配置示例）：

gzip on;
gzip_types image/svg+xml application/json text/css;

• Brotli 压缩比 Gzip 更高，可优先使用。

5. 使用 HTTP/2 或 HTTP/3

• 多路复用（Multiplexing）可同时加载多个资源，减少阻塞。

• Nginx 启用 HTTP/2：

listen 443 ssl http2;

总结